<template>
  <div class="chat">
    <div class="tabs">
      <div class="tab" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)" :class="{active: index === curTab}">
        <el-badge :value="item.badge||''">
          <i :class="item.icon"></i>
        </el-badge>
      </div>
    </div>
    <div class="panels">
      <chat-panel v-if="curTab===0"></chat-panel>
      <contact-panel v-if="curTab===1"></contact-panel>
      <other-panel v-if="curTab===2"></other-panel>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'
  import ChatPanel from './panel/ChatPanel.vue'
  import ContactPanel from './panel/ContactPanel.vue'
  import OtherPanel from './panel/OtherPanel.vue'
  import { mapState, mapActions } from 'vuex'

  @Component({
    components: {
      ChatPanel,
      ContactPanel,
      OtherPanel
    },
    computed: {
      ...mapState({
        tabs: state => state.chat.tabs,
        curTab: state => state.chat.curTab
      })
    },
    mounted () {
      this.initChat()
    },
    methods: {
      ...mapActions({
        initChat: 'chat/initChat',
        tabClick: 'chat/tabClick'
      })
    }
  })
  export default class Chat extends Vue {

  }
</script>

<style lang="scss" scoped>
  .chat{
    height: 100%;
    width: 100%;
    position: relative;
    .panels{
      top: 55px;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
    .tabs{
      height: 55px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      .tab{
        height: 100%;
        cursor: pointer;
        flex: 1;
        align-items: center;
        display: flex;
        justify-content: center;
        & + .tab{
          border-left: 1px solid #ebeef5;
        }
        &.active{
          background-color: #46404030
        }
      }
    }
  }
</style>
